<template>
  <view class="custom-nav">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <view class="nav-left" v-if="showBack" @tap="handleBack">
        <image class="back-icon" src="/static/left.svg" mode="aspectFit" />
      </view>
      
      <!-- 中间内容区域 -->
      <view class="nav-center">
        <!-- 如果传入了logo，显示logo -->
        <image 
          v-if="showLogo" 
          class="nav-logo" 
          :src="logoSrc" 
          mode="aspectFit"
        ></image>
        <!-- 如果传入了标题，显示标题 -->
        <text v-else-if="title" class="nav-title">{{ title }}</text>
        <!-- 插槽，允许自定义中间内容 -->
        <slot name="center"></slot>
      </view>
      
      <!-- 右侧内容区域 -->
      <view class="nav-right" @click="handleRightClick">
        <image class="back-icon" src="/static/navbar/right.svg" mode="aspectFit" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDrawerStore } from '../store/drawer'

// 定义组件props
const props = defineProps({
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: false
  },
  // 是否显示logo
  showLogo: {
    type: Boolean,
    default: true
  },
  // logo图片路径
  logoSrc: {
    type: String,
    default: '/static/1x/logo.png'
  },
  // 导航栏标题
  title: {
    type: String,
    default: ''
  },
  // 导航栏背景色
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  // 是否显示阴影
  showShadow: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['back', 'mounted'])

// 导航栏高度相关
const statusBarHeight = ref(0)
const navBarHeight = ref(44)

// 计算总的导航栏高度
const totalNavHeight = computed(() => {
  return statusBarHeight.value + navBarHeight.value
})

const handleRightClick = () => {
  const drawerStore = useDrawerStore()
  drawerStore.toggleDrawer()
}

// 返回按钮点击处理
const handleBack = () => {
  console.log('CustomNavBar返回按钮被点击')
  emit('back')
}

// 获取系统信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  console.log('系统信息:', systemInfo)
  statusBarHeight.value = systemInfo.statusBarHeight || 20 // 设置默认值为20px
  console.log('状态栏高度:', statusBarHeight.value)
  
  // 触发mounted事件，通知父组件导航栏已挂载
  emit('mounted')
})

// 暴露导航栏高度给父组件使用
defineExpose({
  totalNavHeight,
  statusBarHeight,
  navBarHeight
})
</script>

<style scoped>
/* 自定义导航栏样式 */
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: v-bind(backgroundColor);
  background-color: aqua;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  padding-top: 0; /* 移除顶部间距 */
}

.status-bar {
  width: 100%;
  background: v-bind(backgroundColor);
  background-color: pink;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: v-bind(backgroundColor);
  background-color: antiquewhite;
  padding: 0 32rpx;
}

.nav-left {
  width: 80rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  color: #333333;
}

.nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo {
  height: 56rpx;
  width: 353rpx;
  max-width: 200rpx;
  margin-left: 50rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.nav-right {
  width: 80rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>